<!DOCTYPE html>
<html lang="en">
<head>
<title>T6 - Div T2</title>
<style>
h1 {
text-align: center;
font-size: 45px;
}
#outer {
height: 1000px;
width: 1000px;
border: 1px solid;
margin: 0 auto;
}
#header1, #header2, #header3, #header4 {
height: 250px;
width: 1000px;
}
#header1_left, #header3_left {
float: left;
height: 250px;
width: 700px;
}
#header1_left_top, #header3_left_top {
height: 125px;
width: 700px;
background-color: #F4C689;
}
#header1_left_bottom, #header3_left_bottom {
height: 125px;
width: 700px;
background-color: #ED9421;
}
#header1_right, #header3_right {
float: right;
background-color: red;
height: 250px;
width: 300px;
}
#header2_left, #header4_left {
float: left;
background-color: red;
height: 250px;
width: 300px;
}
#header2_right, #header4_right {
float: right;
height: 250px;
width: 700px;
}
#header2_right_top, #header4_right_top {
height: 125px;
width: 700px;
background-color: #F4C689;
}
#header2_right_bottom, #header4_right_bottom {
height: 125px;
width: 700px;
background-color: #ED9421;
}
</style>
</head>
<body>
<h1>Task - 6 | Div Task - 2</h1>
<div id="outer">
<div id="header1">
<div id="header1_left">
<div id="header1_left_top"></div>
<div id="header1_left_bottom"></div>
</div>
<div id="header1_right"></div>
</div>
<div id="header2">
<div id="header2_left"></div>
<div id="header2_right">
<div id="header2_right_top"></div>
<div id="header2_right_bottom"></div>
</div>
</div>
<div id="header3">
<div id="header3_left">
<div id="header3_left_top"></div>
<div id="header3_left_bottom"></div>
</div>
<div id="header3_right"></div>
</div>
<div id="header4">
<div id="header4_left"></div>
<div id="header4_right">
<div id="header4_right_top"></div>
<div id="header4_right_bottom"></div>
</div>
</div>
</body>
</html>